<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="login-title">用户登录</h2>

      <el-form @submit.prevent="login" label-width="80px">
        <el-form-item label="邮箱地址">
          <el-input v-model="credentials.email" type="email" required autocomplete="email" :disabled="isLoading" />
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="credentials.password" type="password" required autocomplete="current-password"
            :disabled="isLoading" show-password />
        </el-form-item>

        <el-button type="primary" native-type="submit" class="login-button" :loading="isLoading">
          {{ isLoading ? '登录中...' : '登录' }}
        </el-button>

        <div v-if="error" class="error-message">
          {{ error }}
        </div>

        <div class="form-footer">
          <el-link href="/reset_password">忘记密码？</el-link>
          <el-link href="/register">立即注册</el-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import apiClient from '@/utils/api.js'; // 导入你的 api.js 文件

export default {
  data() {
    return {
      credentials: {
        email: '2654207269@qq.com', // 默认测试邮箱
        password: 'newPassword1234' // 默认测试密码
      },
      error: null,
      isLoading: false
    };
  },
  methods: {
    async login() {
      this.error = null;
      this.isLoading = true;

      try {
        // 前端验证邮箱格式
        if (!this.validateEmail(this.credentials.email)) {
          this.error = '请输入有效的邮箱地址';
          return;
        }

        // 前端验证密码格式
        if (!this.validatePassword(this.credentials.password)) {
          this.error = '密码需至少8位，包含大小写字母和数字';
          return;
        }

        // ✅ 使用 apiClient 中的 auth 模块调用登录接口
        const response = await apiClient.auth.login(this.credentials);

        // 处理后端返回数据（假设响应包含 token）
        if (response.token) {
          localStorage.setItem('token', response.token);
          this.$router.push('/home'); // 通过 this.$router 访问路由实例
        } else {
          this.error = '登录失败，服务器未返回有效 Token';
        }
      } catch (error) {
        this.error = error.message;
        console.error('登录错误:', error);
      } finally {
        this.isLoading = false;
      }
    },

    // 邮箱格式验证函数
    validateEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(email);
    },

    // 密码格式验证函数
    validatePassword(password) {
      const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
      return passwordRegex.test(password);
    }
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.login-title {
  text-align: center;
  width: 100%;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-card {
  width: 400px;
  padding: 20px;
}

.login-button {
  width: 100%;
  margin-top: 10px;
}

.form-footer {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}

.error-message {
  color: #ff4d4d;
  margin-top: 10px;
}
</style>